<template>
  <div class="container">
    <el-card class="topic-list">
      <!-- 关键字搜索 -->
      <el-form :inline="true" :model="formInline" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.keywords"
                style="width: 250px"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row type="flex" justify="end">
              <el-form-item>
                <el-button @click="clearFn">清除</el-button>
                <el-button type="primary" @click="serchFn">查询</el-button>
              </el-form-item>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- /关键字搜索 -->
      <!-- 数据条目 -->
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <i class="el-icon-info" style="color: #8f9298"></i>
            <span class="data-num-text">数据一共&nbsp;{{counts}}&nbsp;条</span>
          </div></el-col
        >
      </el-row>
      <!-- /数据条目 -->
      <questionList
        @CurrentChange="pageFn"
        @sons="fathersFn($event)"
        @son="fatherFn($event)"
        @delete="clearsFn($event)"
        :questionList="dataa"
      ></questionList>
      <!-- //题目编号 -->
      <questionsPreview
        v-if="dialogTableVisible"
        :questionData="database"
        :dialogTableVisible="dialogTableVisible"
        @closeBtn="dialogTableVisible = !dialogTableVisible"
      ></questionsPreview>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, list } from '@/api/hmmm/questions'
import questionList from '@/module-hmmm/components/questionList.vue'
// import questions-preview from '../'
import questionsPreview from '@/module-hmmm/components/questions-preview'
export default {
  data () {
    return {
      formInline: {
        keywords: ''
      },
      subject: null,
      database: {},
      dataa: [],
      dialogTableVisible: false,
      counts: null
    }
  },
  components: {
    questionList,
    questionsPreview
  },
  methods: {
    // 点击清除 清空 输入框里的数据
    clearFn () {
      console.log(1111)
      this.formInline.keywords = ''
    },
    // 点击搜索进行搜索
    async serchFn () {
      // 调用组题列表
      console.log(this.formInline.keywords)
      const {
        data
      } = await randoms({ keyword: this.formInline.keywords })
      console.log(this.id)
      this.dataa = data.items
      this.counts = data.counts
      console.log(this.dataa)
      // this.dataa.questionIDs.forEach((element) => {
      //   console.log(element);
      // });
      // console.log(questionList);
    },
    // 子传父
    async pageFn (items) {
      console.log(items)
      this.dataa = items
    },

    // 点击操作里的删除图标，做删除操作
    clearsFn (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // console.log(id);
          // console.log(id.id);
          await removeRandoms({ id: id.id })
          // console.log(data);
          this.serchFn()
        } catch (err) {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        }

        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },

    fatherFn (boolean) {
      this.dialogTableVisible = boolean
    },
    async fathersFn (Obj) {
      // data.subject;
      this.database = Obj
      // Obj.subject = this.database = Obj;

      // console.log(Obj);
      // 因基础题库无法获取学科数据，则需,调用 基础题库详情接口获取·学科数据
      const { data } = await list({ subjectID: Obj.subjectID })
      // console.log(data);
      // console.log(data.items[0].subject);
      // console.log(this.database);
      this.database.subject = data.items[0].subject
      console.log(this.database)
    }
  },
  created () {
    this.serchFn()
  }
}
</script>

<style scoped lang='scss'>
.topic-list {
  margin-bottom: 10px;
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    padding-left: 20px;
    .data-num-text {
      font-size: 14px;
      color: #8f9298;
      padding: 10px;
    }
  }
  .bg-purple-dark {
    background: #f4f4f5;
  }
}
</style>
